import React, { Component, Suspense, lazy } from "react";
// import {
//   BrowserRouter,
//   HashRouter,
//   Route,
//   Link,
//   Switch,
// } from "react-router-dom";
import { Redirect, Route, Switch } from "react-router-dom";
//import "antd/dist/antd.css";

const Home = lazy(() => import("./views/home"));
const About = lazy(() => import("./views/about"));
const Work = lazy(() => import("./views/work"));
// 导入info页面
// 直接使用
const Info = lazy(() => import("./views/info"));
const Product = lazy(() => import("./views/product"));
const Tab = lazy(() => import("./views/tab"));
const Page = lazy(() => import("./views/page"));
const Ajax = lazy(() => import("./views/ajax"));
const StorePage = lazy(() => import("./views/storepage"));
const NewStore = lazy(() => import("./views/newstore"));
// Route 使用 path component
// exact 精准匹配
// Redirect 非法url 要跳到那个位置
// 模板页面：排版时一样的，只是内容不同
//    ID   ----   动态的url
const Find = lazy(() => import("./views/ajax"));
const Own = lazy(() => import("./views/own"));
const OwnRight1 = lazy(() => import("./views/own/right1"));
const OwnRight2 = lazy(() => import("./views/own/right2"));
// const Right1 = lazy(() => import("./views/own/right1"));
// const OwnSide = lazy(() => import("./views/own/side"));
const Details = lazy(() => import("./views/page/details"));
const PageGx = lazy(() => import("./views/pagegx"));
class App extends Component {
  render() {
    return (
      <Suspense
        fallback={
          <div
            style={{
              textAlign: "center",
              fontSize: "24px",
              lineHeight: "100px",
            }}
          >
            正在加载中。。。
          </div>
        }
      >
        <Switch>
          <Route exact path="/" component={Work} />
          <Route path="/teacher/:id" component={Work} />
          <Route path="/tab" component={Tab} />
          <Route path="/ajax" component={Ajax} />
          <Route exact path="/page" component={Page} />
          <Route path="/page/details/:id" component={Details} />
          <Route path="/storepage" component={StorePage} />
          <Route path="/find" component={Find} />
          <Route path="/newstore" component={NewStore} />
          <Route exact path="/own" component={Own} />
          <Route path="/own/wei" component={OwnRight1} />
          <Route path="/own/jiao" component={OwnRight2} />
          <Route path="/pagegx" component={PageGx} />
          {/* exact 严格的 */}
          <Route path="/about" component={About} />
          {/* path 自定义的url  component 引入的文件 */}
          <Route path="/home" component={Home} />
          {/* 模板页面 */}
          <Route exact path="/info" component={Info} />
          {/* 动态路由 */}
          <Route path={`/info/:id`} component={Info} />
          <Route exact path="/product" component={Product} />
          <Route path={`/product/:id`} component={Product} />
          <Redirect to="/" />
          {/* 没有这个页面时，跳转到指定页面 */}
        </Switch>
      </Suspense>
    );
  }
}
export default App;

// web1906 同学信息展示
// 1. 同学列表
//    所有同学的姓名
// 2.每个同学详情
//    姓名：
